<template>
	<view class="page">
		<z-paging ref="paging" v-model="list" @query="queryList" :default-page-size="10">
			<view slot="top">
				<navBar title="成员" bg="#FFF"></navBar>

				<view class="content">
					<view class="title">指定直播人</view>
					<view class="empty flex_r_around" v-if="!liveMemberList.length">
						<text>请选择</text>
					</view>
					<scroll-view scroll-x="true" @scrolltolower="onReach">
						<view class="select_people flex_center">
							<view class="item flex_c" v-for="(item,index) in liveMemberList" :key="index">
								<image :src="item.avatar" mode="aspectFill"></image>
								<view class="hidden">{{ item.nickname || '' }}</view>
							</view>
						</view>
					</scroll-view>
					<view class="title">成员列表</view>
				</view>
			</view>
			<view class="container">
				<view class="list flex_center" v-for="(item,index) in list" :key="index" @click="onSelect(item)">
					<image class="icon" :src="`/static/public/select${showSelect(item) ? '_s' : ''}.png`"
						mode="aspectFill"></image>
					<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
					<view class="hidden">{{ item.nickname || '' }}</view>
				</view>
			</view>

			<view slot="bottom">
				<view class="btn_box flex_r_between">
					<view class="left">
						<text>{{ liveMemberList.length }}</text>
						<i>/100</i>
					</view>
					<view class="right flex_r_around" @click="onSubmit">
						<text>添加({{ liveMemberList.length }})</text>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import navBar from '@/compentents/navBar/navBar.vue';
	export default {
		components: {
			navBar,
		},
		data() {
			return {
				circle_id: 0,

				liveMemberList: [],
				liveMemberPage: 1,
				liveMemberTotal: 1,

				list: [],
				page: 1,
				total: 1,
			}
		},
		methods: {
			queryList(pageNo, pageSize) {
				// 0 在线
				this.$get('/circle.circle/getLiveMemberList', {
					page: pageNo,
					circle_id: this.circle_id,
					limit: pageSize,
					// 1=圈子成员，2=已选人员
					type: 1,
					// 1=开播成员设置，2=预约电商成员设置
					from: 2,
				}).then(res => {
					this.$refs.paging.complete(res.data.data);
				})
			},
			
			getList() {
				// 0 在线
				this.$get('/circle.circle/getLiveMemberList', {
					circle_id: this.circle_id,
					// 1=圈子成员，2=已选人员
					type: 2,
					// 1=开播成员设置，2=预约电商成员设置
					from: 2,
				}).then(res => {
					this.liveMemberList = res.data.data;
				})
			},
			
			onReach(){
				this.liveMemberPage++;
				this.getList();
			},
			

			onSelect(item) {
				let index = this.liveMemberList.findIndex(element => item.user_id === element.user_id);
				if (index == -1) {
					this.liveMemberList.push(item);
				} else {
					this.liveMemberList.splice(index, 1)
				}
			},

			showSelect(item) {
				let index = this.liveMemberList.findIndex(element => item.user_id === element.user_id);
				if (index == -1) {
					return false;
				} else {
					return true;
				}
			},

			onSubmit() {
				const pages = getCurrentPages(); // 获取当前打开过的页面栈
				const prevPage = pages[pages.length - 2]; // 获取上一个页面实例
				if (prevPage && prevPage.storeMemberList) {
					prevPage.storeMemberList = this.liveMemberList;
				}
				this.$util.back();
			},
		},

		onLoad(option) {
			this.circle_id = option.circle_id;
			this.getList();
		},
	}
</script>

<style lang="less" scoped>
	.page {
		background: #FFFFFF;
		min-height: 100vh;
	}

	.title {
		font-weight: 600;
		font-size: 32rpx;
		color: #131313;
		line-height: 44rpx;
		margin-bottom: 24rpx;
	}

	.content {
		padding: 32rpx 32rpx 0;
		overflow: hidden;

		scroll-view {
			width: 100%;
		}

		.select_people {
			overflow: hidden;
			flex-wrap: nowrap;
			margin-bottom: 48rpx;

			.item {
				flex-shrink: 0;
				width: 144rpx;
				overflow: hidden;
				padding: 0 12rpx;

				image {
					width: 96rpx;
					height: 96rpx;
					border-radius: 48rpx;
				}

				view {
					max-width: 100%;
					font-weight: 600;
					font-size: 28rpx;
					color: #131313;
					line-height: 32rpx;
					margin-top: 16rpx;
				}
			}
		}
	
		.empty {
			height: 120rpx;
			text {
				font-size: 28rpx;
				color: #999;
				line-height: 40rpx;
			}
		}
	}

	.list {
		padding: 24rpx 32rpx;

		.icon {
			width: 36rpx;
			height: 36rpx;
		}

		.avatar {
			width: 96rpx;
			height: 96rpx;
			border-radius: 48rpx;
			overflow: hidden;
			margin: 0 16rpx 0 32rpx;

			image {
				width: 96rpx;
				height: 96rpx;
			}
		}

		.nickname {
			font-weight: 600;
			font-size: 28rpx;
			color: #131313;
			line-height: 32rpx;
		}
	}

	.btn_box {
		height: 120rpx;
		padding-bottom: 30rpx;
		padding: 0 32rpx;
		box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(0, 0, 0, 0.05), 0rpx -2rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);

		.left {
			text {
				font-size: 28rpx;
				color: #FD2A53;
				line-height: 40rpx;
			}

			i {
				font-size: 28rpx;
				color: #131313;
				line-height: 40rpx;
				font-style: normal;
			}
		}

		.right {
			width: 176rpx;
			height: 64rpx;
			background: #FD2A53;
			border-radius: 32rpx;

			text {
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
			}
		}
	}
</style>